<template>
<!-- https://element-plus.youqua.cn/zh-CN/component/menu.html -->
<!-- 可以观察 数据,最外层菜单叫 el-sub-menu 里层数据叫el-menu-item,如果希望路由动态绑定菜单需要使用前端展示递归
具体就是将父级传进来的meunData数据进行拼装(父级的数据其实就是路由里面的url)
主要使用v-if
-->
    <!-- <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>Navigator One</span>
      </template>
      <el-menu-item-group title="Group One">
        <el-menu-item index="1-1">item one</el-menu-item>
        <el-menu-item index="1-2">item two</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="Group Two">
        <el-menu-item index="1-3">item three</el-menu-item>
      </el-menu-item-group>
      <el-sub-menu index="1-4">
        <template #title>item four</template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="2">
      <el-icon><icon-menu /></el-icon>
      <span>Navigator Two</span>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <el-icon><document /></el-icon>
      <span>Navigator Three</span>
    </el-menu-item>
    <el-menu-item index="4">
      <el-icon><setting /></el-icon>
      <span>Navigator Four</span>
    </el-menu-item> -->


    <!-- 递归展示路由 -->
    <template v-for="(item,index) in props.meunData">

        <!-- 点击路由跳转页面需要@click -->
        <el-menu-item 
        @click="handleClick(item,`${props.index}-${item.meta.id}`)"
        v-if="!item.children || item.children.length == 0"
        v-bind:index="`${props.index}-${item.meta.id}`"
        v-bind:key="`${props.index}-${item.meta.id}`">

      <el-icon size:20>
        <!-- <setting />  图标其实是一个标签-->
        <component v-bind:is="item.meta.icon"></component>
        </el-icon>
      <span>{{item.meta.name}}</span>
    </el-menu-item>
      <el-sub-menu v-else
      v-bind:index="`${props.index}-${item.meta.id}`"
      v-bind:key="`${props.index}-${item.meta.id}`">
        <template #title>
            <el-icon size:20>
        <!-- <setting />  图标其实是一个标签-->
        <component v-bind:is="item.meta.icon"></component>
        </el-icon>
        <span>{{item.meta.name}}</span>
            </template>
        <tree-menu
        :meunData="item.children"/>
        
      </el-sub-menu>


    </template>
</template>

<script setup>

// 点击跳转路由那必须能拿到所有路由信息
import {useRouter} from 'vue-router'
import { useStore } from 'vuex';

// 子组件直接获取父组件传递的数据
const props = defineProps(['meunData','index'])

const store = useStore()


console.log(props,'props')

// 跳转方法
const router = useRouter()
const handleClick = (item,active) => {
    console.log(item,'item')
    store.commit('menu/addMenu',item.meta)
    router.push(item.meta.path)
}



</script>

<style lang="less" scoped>

</style>
